<template>
	<view class="withdraw-page d-flex direction-column">
		<view class="withdraw-item d-flex align-items-center">
			<text class="remark">订单号:{{ list.orderid }}</text>
		</view>
		<view class="d-flex direction-column">
			<view class="withdraw-item d-flex align-items-center justify-between">
				<view class="wrapper">


					<view class="u-box">
						<view v-for="(i, k) in list.itemsJson" :key="k">
							<view class="address-box">
								<text class="address">{{ list.goodname }}</text>
							</view>
							<view style="width: 100%;">
								<image :src="i.picture" style="width: 100%;"></image>
							</view>
							<text class="name">数量:{{ i.buynumber }}</text>

						</view>
						<text class="name">状态:{{ list.status }}</text>
						<text class="name">购物袋:{{ list.tablename === '' ? '无' : list.tablename }}</text>
						<text class="name">总价:{{ list.total }}</text>
						<text class="name">下单时间:{{ list.addtime }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view v-else>
			<view class="withdraw-item d-flex align-items-center justify-between">
				<text class="remark"></text>
				<text class="remark">没有数据 </text>
				<text class="time"></text>

			</view>
		</view> -->
	</view>
</template>

<script>
import {
	mapState, mapMutations
} from 'vuex';
export default {
	computed: {
		...mapState('goods', ['isPayOrderList', 'NoPayOrderList', 'cencleOrderList', 'completeOrderList', 'refundOrderList'])
	},
	data() {
		return {
			list: [],
			empty: true,
			item: {},
		};
	},
	onLoad(options) {
		// #ifdef H5
		this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
		// #endif
		console.log(options.orderid);
		// 循环这些订单，找到对应的订单
		this.list = this.isPayOrderList.find(item => item.orderid === options.orderid);
		if (this.list === undefined) {
			this.list = this.NoPayOrderList.find(item => item.orderid === options.orderid);
		}
		if (this.list === undefined) {
			this.list = this.cencleOrderList.find(item => item.orderid === options.orderid);
		}
		if (this.list === undefined) {
			this.list = this.completeOrderList.find(item => item.orderid === options.orderid);
		}
		if (this.list === undefined) {
			this.list = this.refundOrderList.find(item => item.orderid === options.orderid);
		}

		console.log(this.list);

	},
	methods: {
	}
};
</script>

<style lang="scss">
page {
	background-color: $page-color-base;
}

.wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.address-box {
	display: flex;
	align-items: center;

	.tag {
		font-size: 24upx;
		color: $base-color;
		margin-right: 10upx;
		background: #fffafb;
		border: 1px solid #ffb4c7;
		border-radius: 4upx;
		padding: 4upx 10upx;
		line-height: 1;
	}

	.address {
		font-size: 36upx;
		color: $font-color-dark;
	}
}

.u-box {
	color: #333333;
	margin-top: 16upx;
	display: flex;
	flex-direction: column;
	font-size: 36rpx;

	.name {
		margin-right: 30upx;
	}
}

.withdraw-page {
	input {
		border-bottom: 4rpx solid $base-color;
		padding: 20rpx;
		box-sizing: content-box;
		margin-bottom: 20rpx;
	}

	.submit-btn {
		margin-top: 40rpx;
	}

	.withdraw-box {
		background-color: #ffffff;
		margin-bottom: 30rpx;
		padding: 30rpx;
		padding-top: 10rpx;
		box-shadow: 0 12rpx 40rpx -20rpx rgba($color: #000000, $alpha: 0.15);
	}

	.withdraw-item {
		background-color: #ffffff;
		padding: 20rpx;

		.price {
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;

			&:before {
				content: '￥';
				font-size: 26rpx;
			}
		}

		.remark {
			color: #000000;
			font-size: 36rpx;
		}

		.time {
			color: #999999;
			font-size: $font-sm;
		}

		&:not(:last-child) {
			border-bottom: 1px solid #eee;
		}
	}
}
</style>
